<template>
	<view v-if="loadSuccess" class="container">
		<!-- 自定义导航 -->
		<st-custom-header title="订单支付"></st-custom-header>
		
		<!-- 背景块 -->
		<view class="header-bg-block"></view>
		
		<view class="pay-info">
			<view class="total-bar">
				<view class="hd">应付金额</view>
				<view class="fd"><text class="symbol">{{globalExchangeRate}}</text>{{orderInfo.payprice}}</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					订单号：
				</view>
				<view class="bd">
					{{orderInfo.ordersn}}
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					产品编号：
				</view>
				<view class="bd">
					{{orderInfo.series_number}}
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					产品名称：
				</view>
				<view class="bd" v-if="orderInfo.productname">
					{{orderInfo.productname}}
					<text v-if="orderInfo.suit_name">({{orderInfo.suit_name}})</text>
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					使用时间：
				</view>
				<view class="bd">
					{{orderInfo.usedate}}
					<text v-if="orderInfo.flight">({{orderInfo.flight}})</text>
				</view>
			</view>
			<view class="pay-info-item" v-if="additional.length>0">
				<view class="hd" style="line-height: 64rpx;">
					车辆类型：
				</view>
				<view class="bd">
					{{additional[0].suit_name}} <text style="color: red;margin-left: 30rpx;">x<text style="color: red;font-size: 48rpx;margin: 0 20rpx;">  {{additional[0].dingnum}}</text>辆</text>
				</view>
			</view>			
			<view class="pay-info-item" v-if="additional.length>0">
				<view class="hd">
					车牌号：
				</view>
				<view class="bd">
					<block v-for="(item,index) in additional[0].carinfo">
						<text style="margin-right: 20rpx;">{{item.carnumber}}</text>
					</block>														
				</view>
			</view>
			<view class="pay-info-item" v-if="additional.length>0">
				<view class="hd">
					车辆实付：
				</view>
				<view class="bd">
					 <text style="color: red;">{{additional[0].totalprice}}元</text>
				</view>
			</view>
			<view class="pay-info-item" v-if="additional[0].drivernum>0">
				<view class="hd">
					司机人数：
				</view>
				<view class="bd">					
					<text style="color: red;">{{additional[0].drivernum}}人</text>
				</view>
			</view>
			<view class="pay-info-item"  v-if="additional[0].drivernum>0">
				<view class="hd">
					司机实付：
				</view>
				<view class="bd">					
					<text style="color: red;">{{additional[0].driverprice * additional[0].drivernum}}元</text>
				</view>
			</view>
			<view class="pay-info-item" style="margin-top: 30rpx;">
				<view class="hd">
					联系人：
				</view>
				<view class="bd">					
					{{orderInfo.linkman}}
				</view>
			</view>
			<view class="pay-info-item">
				<view class="hd">
					下单时间：
				</view>
				<view class="bd" v-if="orderInfo.addtime">
					{{ get_date_format(orderInfo.addtime) }}
				</view>
			</view>
		</view>

		<radio-group name="paytype" @change="paywayChange">
			<block v-if="pay_method.online && (orderInfo.pay_way == 1 || orderInfo.pay_way == 3)">
				<view class="pay-way  mb-20">
					<block v-for="(item,index) in pay_method.online" :key="index">
						<view v-if="payway.includes(item.pinyin)" class="pay-way-item"  @click="changePaytype(item.payurl)">
							<view class="hd">
								<image :src="paywayConf[item.pinyin].icon" mode="aspectFit"></image>
							</view>
							<view class="bd">
								<view class="pay-type">
									{{item.name}}<text class="surplus" v-if="item.pinyin == 'wallet'">({{globalExchangeRate}}{{walletInfo.total_balance}})</text>
								</view>
								<view class="pay-radio">
									<label class="radio">
										<radio class="radio-size-base" color="#2dbb55" name="paytype" :value="item.payurl" :checked="payurl === item.payurl"/><text></text>
									</label>
								</view>
							</view>
						</view>
					</block>
				</view>
			</block>

			<block v-if="pay_method.offline && (orderInfo.pay_way == 2 || orderInfo.pay_way == 3)">
				<view class="pay-way">
					<block v-for="(item,index) in pay_method.offline" :key="index">
						<view v-if="payway.includes(item.pinyin)" class="pay-way-item" @click="changePaytype(item.pinyin)">
							<view class="bd">
								<view class="pay-type">
									{{item.name}}<text v-if="sysConfig.cfg_pay_xianxia" @click="offlineDes" class="iconfont">&#xe67e;</text>
								</view>
								<view class="pay-radio">
									<label class="radio">
										<uni-radio class="radio-size-base" color="#2dbb55" name="paytype" :value="item.pinyin" :checked="payurl === item.pinyin"/><text></text>
									</label>
								</view>
							</view>
						</view>
					</block>
				</view>
			</block>

		</radio-group>
		
		<!-- 底部操作按钮 -->
		<footer-fixed-bar :isShadow="false" :isBackground="false">
			<view class="footer-alone-btn-default " @click="payorder">
				<view class="text" :class="submitStatus && payurl?'':'btn-disabled'">{{payurl == 'offline'?'提交预订':'立即支付'}}</view>
			</view>
		</footer-fixed-bar>
				
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import footerFixedBar from "@/components/footer-fixed-bar.vue";
	import {
		isWxClient,
		get_date_format,
		check_app_install
	} from "@/utils/utils.js";
	import {
		getOrderDetailPage
	} from "@/utils/toPath.js";
	import walletPay from '@/utils/pay.wallet.js'
	export default {
		components: {
			footerFixedBar,
			uniPopup
		},
		data() {
			return {
				loadSuccess:false, // 支付数据加载完成显示页面
				additional:{},
				orderInfo: {},
				pay_method: {},
				submitStatus: false,
				payurl: '',
				payway: ['wxpay', 'wxh5', 'alipay', 'offline','wallet', 'icbcpay','monthlysettle'], // 目前支持的支付方式
				paywayConf: { // 目前支持的微信支付方式相关配置
					wxpay: {
						icon: 'https://static.member.stourweb.cn/uniapp/static/images/' + 'wechat_icon.png'
					},
					wxh5: {
						icon: 'https://static.member.stourweb.cn/uniapp/static/images/' + 'wechat_icon.png'
					},
					alipay: {
						icon: 'https://static.member.stourweb.cn/uniapp/static/images/' + 'alipay_icon.png'
					},
					wallet:{
						icon: 'https://static.member.stourweb.cn/uniapp/static/images/' + 'recharge_icon.png'
					},
					icbcpay:{
						icon: 'https://static.member.stourweb.cn/uniapp/static/images/' + 'icbc_icon.png'
					},
					monthlysettle:{
						icon: 'https://static.member.stourweb.cn/uniapp/static/images/' + 'recharge_icon.png'
					},
				},
				sysConfig:{
					cfg_pay_xianxia:''
				},
				walletInfo:{}
			}
		},
		onLoad(options) {
			// 检查是否是微信端
			this.isWxClient = isWxClient();
			//信息设置
			if (options.ordersn) {
				this.ordersn = options.ordersn;
			}
		},
		onShow() {
			if (this.ordersn) {
				this.getOrderDetail();
				
				//是否安装钱包充值
				if(check_app_install('system_wallet')){
					this.getWalletIndex();
				}	
			} else {
				uni.showToast({
					title: '参数信息有误',
					icon: 'none'
				})
			}
		},
		methods: {
			// 获取订单支付信息详情
			async getOrderDetail() {
				let params = {
					method: 'api/v2/payment/index/index',
					ordersn: this.ordersn,
					comefrom:'h5',
					is_wx_client: this.isWxClient ? 1 : 0
				};
				uni.showLoading({
					title: '加载中...'
				})
				let res = await this.$http(params);
				uni.hideLoading();
				if (res.status) {
					
					// 已支付
					if (res.data.is_payed == 1) {
						uni.redirectTo({
							url: `/pages/order/paysuccess?ordersn=${this.ordersn}&orderid=${res.data.id}`
						})
						return;
					}
					
					this.loadSuccess = true
					this.submitStatus = true;
					this.additional = res.data.additional
					this.orderInfo = res.data.info;
					this.pay_method = res.data.pay_method;
					// 预处理在线支付地址
					let pageParams = {
							orderid: this.orderInfo.id
						},
						return_url = `/h5/#/pages/order/paysuccess?orderid=${this.orderInfo.id}&ordersn=${this.ordersn}` // 支付成功回调地址
					if (this.pay_method.online) {
						for (let i in this.pay_method.online) {
							let item = this.pay_method.online[i];
							if(item.pinyin != 'wallet'){
								this.pay_method.online[i].payurl =
									`${item['payurl']}?ordersn=${this.ordersn}&method=${item.id}&returnurl=${encodeURIComponent(return_url)}`
							}else{
								this.pay_method.online[i].payurl = 'wallet'
							}
						}
					}
					// 处理线下支付的描述信息
					if(this.orderInfo.pay_way == 2 || this.orderInfo.pay_way == 3)
					{
						this.getSysConfig();
					}

				} else {
					this.errPath(res);
				}
			},
			
			// 获取钱包余额
			async getWalletIndex() {
				let params = {
					method: 'api/v2/member/bag/wallet_index'
				}
				let res = await this.$http(params);
				if(res.status){
					this.walletInfo = res.data;
				}
			},
			
			// 获取系统配置
			async getSysConfig () {
				let params = {
					method: 'api/v2/system/get_sys_configs',
					filed:"cfg_pay_xianxia"
				};
				let res = await this.$http(params);
				if(res.status)
				{
					this.sysConfig = res.data;
				}
			},
			// 获取日期格式
			get_date_format(time) {
				return get_date_format(time, "yyyy-MM-dd hh:mm:ss");
			},
			// 切换支付方式
			paywayChange(e) {
				this.payurl = e.detail.value;			
			},
			changePaytype(e){
				console.log(e)
				this.payurl = e
			},
			//立即支付
			payorder() {
				let orderInfo = this.orderInfo;
				if(!this.payurl) {
					return false;
				}
				if (this.payurl == 'offline') {
					this.offlinePay();
					return false;
				}
				
				if(this.submitStatus) {
					if(this.payurl !='wallet'){
						this.submitStatus = false;
						location.href = this.payurl;
					}else{
						
						if(parseFloat(this.walletInfo.total_balance) < parseFloat(this.orderInfo.payprice)){
							uni.showToast({
								icon: 'none',
								title:'余额不足'
							})
							return
						}
						
						uni.showModal({
							title: '',
							content: '确定支付￥' + this.orderInfo.payprice + '?',
							showCancel: true,
							confirmColor: '#333333',
							success: res => {
								if (res.confirm) {
									walletPay(orderInfo)
								}
							}
						});
						
						// 钱包抵扣
						//walletPay(this.orderInfo)
					}
				}
			},
			// 订单线下支付及提示
			offlinePay() {
				let orderInfo = this.orderInfo;
				// 前往订单详情
				let url = getOrderDetailPage(orderInfo.typeid, {
					orderid: orderInfo.id,
					title: orderInfo.productname,
					typeid: orderInfo.typeid
				});
				if (url) {
					uni.redirectTo({
						url: url
					})
				}
			},
			// 线下支付描述的
			offlineDes(){
				uni.navigateTo({
					url: `/platforms/h5/pay/offline`
				})
			},
			// 订单状态错误页面跳转
			errPath(errData) {
				let data = errData.data ? errData.data : '',
					errmsg = errData.msg,
					path = `/pages/order/payerr?errmsg=${errmsg}`;
				if (data.sign) {
					if (data.sign == 24 && data.id) { // 支付成功
						uni.redirectTo({
							url: `/pages/order/paysuccess?ordersn=${this.ordersn}&orderid=${data.id}`
						})
						return;
					}
				}

				uni.redirectTo({
					url: path
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #f6f6f6
	}
	.container {
		position: relative;
	}
	
	.header-bg-block{
		position: absolute;
		width: 100%;
		height: 260rpx;
		background: linear-gradient(to right, #5BE181 0%, #11C586 100%);
		&:after{
			content: "";
			display: block;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, transparent, #f6f6f6);
		}
	}

	.mb-20 {
		margin-bottom: 20rpx !important;
	}

	.iconfont {
		margin-left: 10rpx;
		color: $uni-color-primary;
		vertical-align: middle;
	}

	.pay-info {
		margin: 20rpx 24rpx;
		background: $uni-bg-color;
		border-radius: 20rpx;
		padding: 24rpx;
		position: relative;
		display: block;
		z-index: 1;
		font-family: Arial, Helvetica, sans-serif;
		&::after{
			content: "";
			display: block;
			height: 100rpx;
			position: absolute;
			top: 1px;
			left: 1px;
			right: 1px;
			z-index: -1;
			border-radius: 20rpx;
			background: linear-gradient(to bottom, #DEFCE6, transparent);
		}
		
		.total-bar{
			color: #FF4A50;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 12rpx 0 20rpx;
			font-weight: bold;
			font-size: 48rpx;
			.hd{
				color: #222;
			}
			.fd{
				color: #FF4A50;
				.symbol{
					font-size: 28rpx
				}
			}
		}

		.pay-info-item {
			display: flex;
			font-size: $uni-font-size-base;
			padding: 16rpx 0;

			.hd {
				color: #333;
				width: 144rpx;
				flex: 0 0 auto;
			}

			.bd {
				color: #999;
				word-break: break-all;
				flex: 1 1 auto;
			}
		}
	}

	.pay-way {
		margin: 0 $uni-spacing-col-lg;
		border-radius: 8rpx;

		.pay-way-item {
			display: flex;
			align-items: center;
			font-size: $uni-font-size-base;
			padding: 20rpx;
			margin-bottom: 20rpx;
			position: relative;
			border-radius: 20rpx;
			background: $uni-bg-color;

			&::after {
				content: '';
				display: block;
				width: calc(100% - 62rpx);
				background-color: $uni-border-color;
				height: 2rpx;
				transform: scale(1, 0.5);
				position: absolute;
				bottom: 0;
				left: 62rpx;
			}

			&:last-child::after {
				content: '';
				display: none;
			}

			.hd {
				width: 62rpx;
				flex: 0 0 auto;

				image {
					width: 48rpx;
					height: 36rpx;
				}
			}

			.bd {
				flex: 1 1 auto;
				color: #000000;
				font-size: $uni-font-size-base;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.surplus{
					font-size: $uni-font-size-mini;
					color: $uni-text-color-primary;
					font-family: Arial, Helvetica, sans-serif;
					margin-left: 10rpx;
				}
			}
		}
	}

	// 底部独立按钮
	.footer-alone-btn-default {
		text-align: center;
		padding: 0 24rpx 24rpx;
		background: $uni-bg-color-grey;

		.text {
			padding: 24rpx 0;
			color: $uni-text-color-inverse;
			border-radius: 200rpx;
			font-size: $uni-font-size-lg;
			background: linear-gradient(to right, #FF8A2A, #FF644E);
		}

		.btn-disabled {
			background: #ccc;
		}
	}
</style>
